import { Component } from 'react'
import {View, Text } from '@tarojs/components'
import './index.scss'

export default class LgCheckbox extends Component {
  constructor () {
    super(...arguments)
    this.setVal = this.setVal.bind(this);
    this.getVal = this.getVal.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
  state = {
    value: this.props.default || 0
  }
  setVal = value => {
    this.setState({ value: value })
  }
  getVal() {
    return this.state.value;
  }
  handleChange = value => {
    if (this.props.disabled) return;
    if (this.props.value || this.props.value == 0) {
      this.props.onClick && this.props.onClick(this.props.value == 1 ? 0 : 1, this.props.index);
      return;
    }
    var that = this;
    this.setState({ value: this.state.value == 1 ? 0 : 1 }, function() {
      that.props.onClick && that.props.onClick(that.state.value, that.props.index);
    });
  }

  render () {
    var props = this.props; 
    var className = props.className || "", value = (!props.value && props.value != 0) ? this.state.value : props.value;
    className +=  (props.type) ? " lg_check_box_type_" + props.type : " lg_check_box_type_A";
    if (props.disabled) className += " lg_check_box_ban";
    if (value == 1) {
      className += " lg_check_box_cho";
    } else if (props.type == "B" && value == 2) {
      className += " lg_check_box_half";
    }
    return (
      <View className="lg_check_box_warp" onClick={this.handleChange}>
        <View className={"lg_check_box " + className} style={props.style || {}} />
        {props.children ? <View className="lg_check_box_text">{props.children}</View> : null}
      </View>
    )
  }
}